<script>
import TopCeiling from "@/views/home/components/TopCeiling.vue";
import FooterPage from "@/views/home/components/footerPage.vue";
import {Modifyavatar, setuserInfo, viewLogin} from "@/API/http";
import {mapState} from "vuex";

export default {
  name: "personalCenter",
  computed:{
    ...mapState({
      userInfo: state => state.user.userInfo,
    })
  },
  components: {FooterPage, TopCeiling},
  data(){
        return{
          visible: false,
          // avatar:[],
          nickname:''
        }
  },
  methods:{
    callback(key) {
      console.log(key);
    },
    // 上传头像按钮
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        console.log(info.file)
        this.$store.commit('setUser',{userInfo:info.file.response.userInfo})
        this.$message.success(`${info.file.name} 更换头像成功！`);
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 更换头像失败成功！`);
      }
    },
    // 上传头像请求
    setModifyavatar(){
      Modifyavatar().then(res => {
        console.log(res)
      })
    },
    // 修改昵称
    confirmed(){
      setuserInfo({nickname:this.nickname}).then(res=>{
        console.log(res)
        if(res.code===0){
          this.$store.commit('setUser',{userInfo:res.userInfo})
          this.visible = false;
        }
       // res.nickname= this.nickname
      })
    },
    // 这是对话框
    showModal() {
      this.visible = true;
      // console.log(this.visible)
    },
    cancel(){
      this.visible = false;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
  },
  created() {
    // setuserInfo
    viewLogin().then(res=>{
      if(res.code===0){
        // this.avatar=res.data
        this.$store.commit('setUser',{userInfo:res.data})

      }
    })
  }
}
</script>

<template>
 <div>

   <div class="html">
     <TopCeiling></TopCeiling>
   <div class="box">
     <div class="TabBox">
       <a-tabs default-active-key="1" @change="callback" tabPosition="left">
         <a-tab-pane key="1" tab="我的主页">
           <div>
            <div>
              <h1>个人信息</h1>
            </div>
             <div class="personalItem">
               <div class="content"><p>昵称</p><span type="primary" @click="showModal">修改</span></div>
               <a-modal v-model="visible" title="昵称设置" @ok="handleOk" :footer="null" width="300px">
                 <div>
                   <div class="chengenick">
                     <label for="nickName">
                          昵称:
                     </label>
                     <input id="nickName" type="text" v-model="nickname" placeholder="请输入新的昵称">
                   </div>
                   <div class="cancelandconfirmed">
                     <div class="cancel" @click="cancel">取消</div>
                     <div class="confirmed" @click="confirmed">确认</div>
                   </div>
                 </div>
               </a-modal>
                <p>{{userInfo.nickname}}</p>
             </div>
             <div class="personalItem">
               <div class="content"><p>手机号</p><span>修改</span></div>
               <p>{{userInfo.mobile}}</p>
             </div>
             <div class="personalItem">
               <div class="content"><p>密码</p><span>修改</span></div>
               <p>******</p>
             </div>
             <div class="personalItem">
                 <div class="avatarImgitem">
                   <img :src="userInfo.avatarUrl">
                 </div>
                 <div>
                   <a-upload
                       name="file"
                       action="/api/pcUser/updata/userAvatar"
                       @change="handleChange"
                   >
                     <a-button @click="setModifyavatar"> <a-icon type="upload" />更改头像</a-button>
                   </a-upload>
                 </div>
             </div>
           </div>
         </a-tab-pane>
         <a-tab-pane key="2" tab="我的课程" force-render>
           <div>
             <div>
               <div>
                 <a-tabs default-active-key="1" @change="callback">
                   <a-tab-pane key="1" tab="正在学习">

                   </a-tab-pane>
                   <a-tab-pane key="2" tab="我的收藏" force-render>
                     Content of Tab Pane 2
                   </a-tab-pane>
                   <a-tab-pane key="3" tab="我的报名">
                     Content of Tab Pane 3
                   </a-tab-pane>
                   <a-tab-pane key="4" tab="观看记录">
                     Content of Tab Pane 3
                   </a-tab-pane>
                 </a-tabs>
               </div>
             </div>
           </div>
         </a-tab-pane>
         <a-tab-pane key="3" tab="我的订单">
            <div>
              <a-tabs default-active-key="1" @change="callback">
                <a-tab-pane key="2" tab="全部订单" force-render>
                  Content of Tab Pane 2
                </a-tab-pane>
                <a-tab-pane key="3" tab="等待付款">
                  Content of Tab Pane 3
                </a-tab-pane>
                <a-tab-pane key="4" tab="付款成功">
                  Content of Tab Pane 3
                </a-tab-pane>
              </a-tabs>
            </div>
         </a-tab-pane>
       </a-tabs>
     </div>
   </div>
     <div class="footer">
       <footerPage></footerPage>
     </div>

   </div>

 </div>
</template>

<style scoped lang="less">
:deep(.ant-input-group) {
  //padding: 10px;
  //height: 100%;
  border-radius: 19px;
  overflow: hidden;
}
.cancelandconfirmed{
  padding-top: 10px;
  border-top: 1px solid gainsboro;
  margin-top: 10px;
  display: flex;
  justify-content: space-evenly;
  div{
    border-radius: 5px;
    border: 1px solid gainsboro;
    cursor: pointer;
    padding: 5px 15px;
  }
  div:nth-child(2){
    color: white;
    background: #42b983;
  }
}
#nickName{
  outline: 0;
  border: 1px solid black;
  border-radius: 5px;
  padding-left: 5px;
  width: 60%;
  height: 30px;
  margin-left: 10px;
}
.chengenick{
  justify-content: center;
  align-items: center;
display: flex;
}
.personalItem{
  padding: 15px;
  margin: 10px;
  border-bottom: 1px solid gainsboro;
}
.avatarImgitem{
  margin-bottom: 15px;
  width: 150px;
  img{
    height: 150px;
    width: 100%;
  }
}
p{
  font-size: 18px;
  margin: 0;
  margin-right: 10px;
}
span{
  cursor: pointer;
  color: #42b983;
  transition: color 0.3s;
}
span:hover{
  color: #8bfaca;
}
.content{
  margin-bottom: 15px;
  align-items: flex-end;
  display: flex;
}
  .html{
    background: #f4f4f4;
  }
  .TabBox{
    padding: 15px;
    background: #fff;
    width: 1200px;
    margin: 15px auto ;
    border-radius: 15px;

  }
  :deep(.ant-input-group){
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
  }
</style>